<template>
  <div class="loginBody">
    <div class="return">
      <router-link to="/">
        <Icon size="30" color="#808080" name="arrow-left" />
      </router-link>
    </div>
    <div class="login-logo">
      <VanImage
          width="9rem"
          height="11rem"
          :src="require('@/assets/backgrounds/logo.png')"
          class="center-image"
      />
    </div>
    <p class="login-title">爱宠星球</p>
    <Form @submit="onSubmit">
      <Field
          v-model="loginForm.no"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请输入用户名' }]"
      />
      <Field
          v-model="loginForm.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请输入密码' }]"
      />
      <div style="margin: 16px;">
        <Button round block type="info" native-type="submit">注册</Button>
      </div>
    </Form>
  </div>
</template>

<script>
import { Button, Dialog, Field, Form, Icon, Image as VanImage, Toast } from 'vant';
import http from '@/plugins/http';

export default {
  name: "SignupView",
  components: { Icon, Button, Form, Field, VanImage },
  data() {
    return {
      confirm_disabled: false,
      loginForm: {
        no: '',
        password: '',
      },
      agreeTerms: false // 单选按钮的状态
    }
  },
  methods: {
    showTermsDialog() {
      Dialog.confirm({
        title: '服务条款',
        message: '<div style="text-align: left;">在您注册成为爱宠星球用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意。<br></br>点击同意即表示您已阅读并同意<a href="/terms" target="_blank" style="color:#FA6408">《服务条款》</a>并将您的订单信息共享给为完成此订单所必须的第三方合作方。</div>',
        confirmButtonText: '接受',
        cancelButtonText: '拒绝',
        allowHtml: true // 允许在对话框中使用 HTML
      })
          .then(() => {
            // 用户点击接受后的处理逻辑
          })
          .catch(() => {
            // 用户点击拒绝后的处理逻辑
            this.$router.replace('/');
          });
    },
    showConfirmDialog() {
      Dialog.confirm({
        title: '确认注册',
        message: `用户名: ${this.loginForm.no}<br>密码: ${this.loginForm.password}`,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        allowHtml: true // 允许在对话框中使用 HTML
      })
          .then(() => {
            // 用户点击确认后的处理逻辑
            this.submitForm();
          })
          .catch(() => {
            // 用户点击取消后的处理逻辑
          });
    },
    onSubmit() {
      this.showConfirmDialog();
    },
    submitForm() {
      let v = this;
      http({
        method: 'post',
        url: '/user/insert',
        data: {
          'username': v.loginForm.no,
          'password': v.loginForm.password
        },
      })
          .then(res => {
            console.log(res);
            if (res.data && res.statusCode === "200") {
              Toast.success({
                message: `注册成功\n用户名：\n${res.data.username}`,
                duration: 3000,
                className: 'custom-toast'
              });
              if (this.$router.currentRoute.path !== '/') {
                v.$router.replace('/');
              }
            } else {
              Toast.fail({
                message: res.data.message || '注册失败',
                duration: 2000
              });
            }
          })
          .catch(() => {
            Toast.fail({
              message: '注册失败，请稍后再试',
              duration: 2000
            });
          });
    }
  },
  created() {
    this.showTermsDialog();
  }
}
</script>

<style scoped>
.loginBody {
  height: 100vh;
}
.return {
  margin-left: 15px;
  margin-top: 15px;
}
.login-logo {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.center-image {
  display: block;
}
.login-title {
  text-align: center;
  padding-bottom: 20px;
  font-size: 30px;
}
</style>
